<template>
  <!-- 订单详情 -->
  <div class="order-detail">
    <div style="padding-bottom: 50px">
      <!-- 已付款 -->
      <div class="row-align-center od-title" v-if="order.stateID == '2'">
        <van-icon name="todo-list-o" size="45" />
        <div class="flex-column" style="padding-left:10px;">
          <p class="order-title-p1">订单已付款</p>
          <p class="order-title-p2">请完善学员信息</p>
        </div>
      </div>
      <!-- 申请退款中状态 -->
      <div class="row-align-center od-title" v-if="order.stateID == '5'">
        <van-icon name="after-sale" size="45" />
        <div class="flex-column" style="padding-left:10px;">
          <p class="order-title-p1">申请退款中</p>
          <p class="order-title-p2">工作人员会尽快联系您退款事宜</p>
        </div>
      </div>
      <!-- 已完成状态 -->
      <div class="flex-row od-title" v-if="order.stateID == '1'">
        <van-icon name="completed" size="45" />
        <div class="flex-column" style="padding-left:10px;">
          <p class="order-title-p1">订单已完成</p>
        </div>
      </div>
      <!-- 已退款状态 -->
      <div class="flex-row od-title" v-if="order.stateID == '6'">
        <van-icon name="cash-back-record" size="45" />
        <div class="flex-column" style="padding-left:10px;">
          <p class="order-title-p1">订单已退款</p>
        </div>
      </div>
      <!-- 待付款--线下支付未确认 -->
      <div class="column" v-if="order.stateID == '3'||order.stateID == '11'||order.stateID == '12'">
        <p
          style="text-align:right;color: rgba(255, 153, 0, 1);font-size: 12px;text-align: right;padding:3px 5px;background-color:#fff;margin:0;"
        >{{order.remainTime}}</p>
        <div class="row-align-center od-title" style="padding-top:0px;">
          <van-icon name="paid" size="45" />
          <div class="flex-column" style="padding-left:10px;">
            <p class="order-title-p1" v-if="order.stateID == '11'||order.stateID == '12'">订单待付款</p>
            <!-- 待付款--线下支付未确认 -->
            <p class="order-title-p2" v-if="order.stateID == '11'">请完成线下付款，并提醒销售人员确认订单</p>
            <!-- 待付款--未完成支付 -->
            <p class="order-title-p2" v-if="order.stateID == '12'">请尽快完成支付</p>
          </div>
        </div>
      </div>
      <!-- 交易关闭--超时 -->
      <div
        class="row-align-center od-title"
        v-if="order.stateID == '7'||order.stateID == '9'||order.stateID == '10'||order.stateID == '13'"
      >
        <van-icon name="failure" size="45" />
        <div class="flex-column" style="padding-left:10px;">
          <p class="order-title-p1" v-if="order.stateID == '7'">商家已取消</p>
          <p class="order-title-p1" v-if="order.stateID == '9'||order.stateID == '10'">交易关闭</p>
          <!-- 交易关闭--超时 -->
          <p v-if="order.stateID == '9'" class="order-title-p2">超时未完成付款，订单自动关闭</p>
          <!-- 交易关闭--用户取消 -->
          <p v-if="order.stateID == '10'" class="order-title-p2">您已取消订单</p>
          <!-- 交易关闭--课程取消 -->
          <p v-if="order.stateID == '13'" class="order-title-p2">课程停售，交易已关闭</p>
          <!-- 交易关闭--商家取消 -->
          <p v-if="order.stateID == '7'" class="order-title-p2">工作人员会尽快联系您退款事宜</p>
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="flex-column" style="background-color:#fff;margin-top:6px;">
        <p class="p-orderid">购买课程：</p>
        <div class="column-center">
          <div class="list-item flex-row">
            <van-image width="116" height="116" fit="contain" :src="order.courseImg"></van-image>
            <div class="column-space-around course-detail">
              <p class="text-p2">{{order.courseName}}</p>
              <p class="text-p3">
                {{order.courseType}}-
                <van-icon name="location" size="10" color="#F40404" />
                {{order.courseAddress}}
              </p>
              <p class="text-p3">已选：{{order.specification}}</p>
              <div class="row-space-between" style="text-align:left">
                <span style="color:#F40404;">￥{{order.originalPrice|fixed}}</span>
                <span>x1</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-row count">
          <span>小计：</span>
          <span style="color:#F40404;">￥{{order.originalPrice|fixed}}</span>
        </div>
      </div>
      <!-- 留言 -->
      <van-cell-group style="margin-top:6px;">
        <van-cell v-if="order.customerMessage==''" title="买家留言" value="无" />
        <van-cell v-else title="买家留言" :value="order.customerMessage" />
      </van-cell-group>
      <div style="background-color:#fff;">
        <div
          class="flex-column"
          style="color: rgba(16, 16, 16, 1);font-size: 12px;padding:18px 19px;margin-top:6px;"
        >
          <div class="row-space-between">
            <span>课程总价</span>
            <span>￥{{order.originalPrice|fixed}}</span>
          </div>
          <div class="row-space-between">
            <span>优惠</span>
            <!-- <span>￥-10.00</span> -->
            <span>￥{{preferential}}</span>
          </div>
        </div>
        <div style="height: NaNpx;border: 0.5px solid rgba(235, 235, 235, 1);margin:0 10px;" />
        <p
          style="padding:16px 19px 16px 0;margin:0;text-align:right;font-size:12px;"
          v-if="order.stateID == '9'||order.stateID == '10'||order.stateID == '11'||order.stateID == '12'"
        >
          <span>待付金额</span>
          <span style="color:#F40404;">￥{{order.preAmount|fixed}}</span>
        </p>
        <p style="padding:16px 19px 16px 0;margin:0;text-align:right;font-size:12px;" v-else>
          <span>实付款</span>
          <span style="color:#F40404;">￥{{realPay}}</span>
        </p>
        <div style="height: NaNpx;border: 0.5px solid rgba(235, 235, 235, 1);margin:0 10px;" />
        <div class="row-flex-end" v-if="order.stateID == '2'">
          <van-button
            round
            size="small"
            style="margin:10px;"
            @click="refundOrder(order.orderID)"
          >申请退款</van-button>
        </div>
      </div>
      <div style="margin-top:6px;background-color:#fff;">
        <p
          style="color: rgba(58, 58, 58, 0.65);font-size: 12px;margin:0;padding:12px 19px;"
        >订单号：{{order.orderID}}</p>
        <p
          style="color: rgba(58, 58, 58, 0.65);font-size: 12px;margin:0;padding:0 19px 12px 19px;"
        >创建时间：{{order.orderCreateTime}}</p>
      </div>
      <a :href="'tel:'">
        <van-button icon="phone" size="large" style="border:none;margin-top:6px !important;">联系我们</van-button>
      </a>
    </div>
    <div class="row-flex-end" style="position:fixed;width:100%;bottom:0;">
      <van-button :replace="true" to="/home" size="large">返回首页</van-button>
      <van-button
        color="#FF9900"
        size="large"
        style="margin:0px;"
        plain
        v-if="order.stateID == '2'"
        @click="editStuInfo(order)"
      >编辑学员信息</van-button>
      <van-button
        color="#FF9900"
        size="large"
        plain
        style="margin:0px;"
        v-if="order.stateID == '1'"
        @click="StuDetails(order)"
      >查看学员信息</van-button>
      <van-button
        color="#FF9900"
        size="large"
        style="margin:0px;"
        plain
        v-if="order.stateID == '11'||order.stateID == '12'"
        @click="cancelOrder(order.orderID)"
      >取消订单</van-button>
      <van-button
        color="#FF9900"
        size="large"
        style="margin:0px;"
        v-if="order.stateID == '12'"
        @click="showPayPop(order)"
      >立即支付</van-button>
    </div>
    <!-- 支付方式列表 -->
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" />
  </div>
</template>

<script>
import {
  GetOrderDetail,
  RefundOrder,
  CancelOrder,
  ChooseMethod
} from "@/api/order";
import { Toast } from "vant";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      message: "",
      interTime: null,
      actions: [], //支付方式列表
      show: false //支付方式弹窗
    };
  },
  methods: {
    // 查看学员信息
    StuDetails(value) {
      this.$router.push({
        name: "StuDetails",
        params: {
          from: "Order",
          orderID: value.orderID,
          studentID: value.studentID
        }
      });
    },
    // 编辑学员信息
    editStuInfo(value) {
      // this.$store.commit('setAllSee',value.isAllSee)
      this.$store.commit("setEditStuOrderId", value.orderID);
      this.$store.commit("setAllSee", value.isAllSee);
      this.$router.push({
        name: "EditStuInfo"
      });
    },
    // 申请退款
    async refundOrder(value) {
      Toast.loading({
        message: "加载中...",
        forbidClick: true
      });
      const result = await RefundOrder({
        orderNo: value
      });
      if (result.result == "OK") {
        Toast.success("已申请退款");
      }
    },
    //取消订单
    async cancelOrder(value) {
      Toast.loading({
        message: "加载中...",
        forbidClick: true
      });
      const result = await CancelOrder({
        orderNo: value
      });
      if (result.result == "OK") {
        Toast.success("取消成功");
        this.cancelDisable = false;
        // 此为订单提交
        const result = await GetOrderDetail({
          orderNo: value
        });
        if (result.result == "OK") {
          this.$store.commit("setOrderDetail", result.data[0]);
        }
      }
      Toast.clear();
    },
    // 待付款订单倒计时
    async countDown() {
      if (
        this.order.stateID == "11" ||
        this.order.stateID == "12" ||
        this.order.stateID == "3"
      ) {
        let time = this.$moment(this.order.remainTime, "mm:ss");
        this.interTime = setInterval(async () => {
          this.order.remainTime = time.subtract(1, "second").format("mm:ss");
          if (time.format("mm:ss") == "00:00") {
            clearInterval(this.interTime);
            //重新获取页面数据
            const result = await GetOrderDetail({
              orderNo: this.orderNo
            });
            if (result.result == "OK") {
              this.$store.commit("setOrderDetail", result.data[0]);
            }
          }
        }, 1000);
      }
    },
    // 展示付款方式
    showPayPop(value) {
      let offline = value.payMethod.indexOf("1"); //线下
      let online = value.payMethod.indexOf("2"); //线上
      let cash = value.payMethod.indexOf("3"); //现金
      let orderID = value.orderID;
      let courseID = value.courseID;
      let list = [];
      if (online >= 0) {
        list.push({
          id: 1,
          name: "线上支付",
          paymentMethod: "2",
          orderID: orderID,
          courseID: courseID
        });
      }
      if (offline >= 0 && cash >= 0) {
        list.push({
          id: 2,
          name: "线下支付",
          paymentMethod: "1,3",
          orderID: orderID,
          courseID: courseID
        });
      } else if (offline >= 0) {
        list.push({
          id: 2,
          name: "线下支付",
          paymentMethod: "1",
          orderID: orderID,
          courseID: courseID
        });
      } else if (cash >= 0) {
        list.push({
          id: 2,
          name: "线下支付",
          paymentMethod: "3",
          orderID: orderID,
          courseID: courseID
        });
      }
      this.actions = list;
      this.show = true;
    },
    // 待付款--立即支付--选择支付方式
    async onSelect(value) {
      Toast.loading({ forbidClick: true, duration: 0 });
      const result = await ChooseMethod({
        orderNo: value.orderID,
        paymentType: value.paymentMethod,
        courseID: value.courseID
      });
      if (result.result == "OK") {
        Toast.success("选择成功");
        this.show = false;
        // 刷新订单详情
        const result = await GetOrderDetail({
          orderNo: this.orderNo
        });
        if (result.result == "OK") {
          this.$store.commit("setOrderDetail", result.data[0]);
        }
      } else {
        Toast.fail(result.msg);
        this.show = false;
      }
      // 取消倒计时
      clearInterval(this.interTime);
    }
  },
  async created() {
    if (this.orderNo) {
      // 此为订单提交
      const result = await GetOrderDetail({
        orderNo: this.orderNo
      });
      if (result.result == "OK") {
        this.$store.commit("setOrderDetail", result.data[0]);
      }
    }
    this.countDown();
  },
  computed: {
    preferential() {
      if (JSON.stringify(this.order) !== "{}") {
        return (
          (this.order.preferentialRatio.replace("%", "") / 100) *
          parseFloat(this.order.originalPrice) *
          -1
        ).toFixed(2);
      }
    },
    realPay() {
      if (JSON.stringify(this.order) !== "{}") {
        return (
          (1 - this.order.preferentialRatio.replace("%", "") / 100) *
          parseFloat(this.order.originalPrice)
        ).toFixed(2);
      }
    },
    ...mapGetters({ order: "getOrderDetail", orderNo: "getSubmitOrderId" })
  },
  beforeRouteLeave(to, from, next) {
    clearInterval(this.interTime);
    next();
  },
  filters: {
    fixed(value) {
      return parseFloat(value).toFixed(2);
    }
  }
};
</script>

<style lang="scss" scoped>
.order-detail {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
}
.text-p2 {
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  margin: 0;
}
.text-p3 {
  margin: 3px 0;
  color: rgba(16, 16, 16, 0.65);
  font-size: 10px;
  text-align: left;
  line-height: 12px;
}
.list-item {
  width: 95%;
  height: 116px;
  background-color: #fafafa;
  line-height: 20px;
  border-radius: 4px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  font-family: Arial;
  border: 1px solid rgba(255, 255, 255, 0);
}
.p-orderid {
  color: rgba(58, 58, 58, 0.65);
  font-size: 12px;
  text-align: left;
  margin-left: 14px;
}
.count {
  justify-content: flex-end;
  margin: 11px 18px 13px 0;
  font-size: 12px;
}
.course-detail {
  padding: 7px;
  width: 241px;
}
.od-title {
  padding: 13px 20px;
  background-color: #fff;
}
.order-title-p1 {
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  margin: 0;
}
.order-title-p2 {
  color: rgba(16, 16, 16, 0.65);
  font-size: 12px;
  margin: 0;
}
</style>